<template>
    <!-- <el-aside width="200px">Aside</el-aside>  -->
    <el-scrollbar>
        <el-menu :default-active="route.fullPath"  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        style="height: 100vh;" :router="true">
            <template v-for="data in datalist" :key="data.path">
                <!-- sub menu表示可以展开的二级菜单 -->
                <el-sub-menu :index="data.path" v-if="data.children.length && checkAuth(data.path)">
                    <template #title>
                        <el-icon>
                            <component :is="mapIcons[data.icon]"></component>
                        </el-icon>
                        <span>{{ data.title }}</span>
                    </template>
                    <template v-for="item in data.children" :key="item.path">
                         <!-- menu-item表示二级展开后放置的内容 -->
                        <el-menu-item :index="item.path" v-if="checkAuth(item.path)">
                            <el-icon>
                                <component :is="mapIcons[item.icon]"></component>
                            </el-icon>
                            <span>{{ item.title }}</span>
                        </el-menu-item>

                    </template>

                </el-sub-menu>


                <el-menu-item :index="data.path" v-else-if="checkAuth(data.path)">
                    <el-icon>
                        <component :is="mapIcons[data.icon]"></component>
                    </el-icon>
                    <span>{{ data.title }}</span>
                </el-menu-item>
            </template>
      
            
        </el-menu>
    </el-scrollbar>
</template>


<script setup>
import {
  HomeFilled,
  Key,
  Location,
  OfficeBuilding,
  User,
  UploadFilled,
  List
} from '@element-plus/icons-vue'
import {onMounted,ref} from 'vue';
import axios from 'axios'
import {useRoute} from 'vue-router'
import { useUserStore } from '@/store/useUserStore'
const route = useRoute()
console.log(route)
onMounted(()=>{
    getList()
})
const datalist = ref([])
const getList =async ()=>{
    var res =await axios.get("/rights.json")
    // console.log(res.data)
    datalist.value= res.data
}
//图标映射
const mapIcons= {
    //右边的User是icons-vue中存在的图标文件,左右相同省略
    User:User,
    HomeFilled,
  Key,
  Location,
  OfficeBuilding,
  UploadFilled,
  List
}
const {user} = useUserStore()
const checkAuth = (path)=>{
    return user.role.rights.includes(path)
}
</script>